<template>
  <div id="home-case" class="component">
    <div id="home-case-main" class="ptop">
      <div class="slogen"></div>
      <div class="appreciation">
        <div class="slide">
          <appreciation :circleInfo="appreList.imelai"></appreciation>
          <appreciation :circleInfo="appreList.police"></appreciation>
          <appreciation :circleInfo="appreList.citics"></appreciation>
        </div>
        <div class="slide">
          <appreciation :circleInfo="appreList.assessment"></appreciation>
          <appreciation :circleInfo="appreList.test"></appreciation>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import appreciation from '@/components/home/appreciation'
  export default{
    data () {
      return {
        message: '查看更多',
        appreList: {
          imelai: {src: require('@/assets/home/case1.png'), title: '觅来网', msg: ' 觅来定位于追求一定生活品质及关注时尚与个性展示的用户群体，是科瑞自...'},
          police: {src: require('@/assets/home/case2.png'), title: '绵阳市网上公安局', msg: '系统开展的业务服务包括治安、交警、出入境、消防、禁毒、监管、网安等七大业务；互动交流包括...'},
          citics: {src: require('@/assets/home/case3.png'), title: '中信证券微信投资人', msg: '为中信证券专门定制的基于微信公众号的应用程序，包括管理人和投资人两款微信应用'},
          assessment: {src: require('@/assets/home/case4.png'), title: '纳税评估系统', msg: '应用大数据分析技术对报税单位数百项财务数据进行综合评估，发现报税问题进行预警和处理'},
          test: {src: require('@/assets/home/case5.png'), title: '西藏电子商务工程信息系统软件测试', msg: '应用大数据分析技术对报税单位数百项财务数据进行综合评估，发现报税问题进行预警和处理'}
        }
      }
    },
    props: {
      isShow: {
        type: Boolean  // 触发显示隐藏动画
      }
    },
    computed: {},
    methods: {},
    components: {
      appreciation
    }
  }
</script>
<style scoped>
  #home-case {text-align: center; background-image: url('../../assets/home/home-bg3.png'); position: relative}
  #home-case-main .slogen{background-image: url("../../assets/home/case.png")}
  .appreciation{margin: 0 auto; top: 40%; position: relative }
</style>
